{% extends 'assets/base.html' %}
{% load bootstrap %}
{% block content %}

    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>更新主机 | Update Host.</h2>
        </div>
        <div class="col-lg-2">
        </div>
    </div>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-10">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5> 填写主机详细信息 </h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user"></ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>

                    <div class="ibox-content">
                        <form class="form-horizontal" id="host_edit" method="post" name="horizontal" role="form"
                              autocomplete="off">
                            {% csrf_token %}
                            {{ form.node_name|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.eth1|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.eth2|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.mac|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.internal_ip|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.number|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.cpu|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.memory|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.hard_disk|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.status|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.env|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.idc|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            <div class="form-group"><label class="col-sm-2 control-label">虚拟机父主机</label>
                                <div class="col-sm-8"><input type="text" placeholder="如果主机为虚拟机, 请填写父主机IP, 真实机则不填写."
                                                             name="physics" class="form-control"
                                                             value="{{ host.vm.eth1 }}"></div>
                            </div>

                            <div class="hr-line-dashed"></div>
                            {{ form.brand|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.system|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.system_cpuarch|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label for="groups" class="col-lg-2 control-label">所属项目组</label>

                                <div class="col-sm-3">
                                    <select id="groups" size="12" class="form-control m-b" multiple>
                                        {% for i in projects %}
                                            <option value="{{ i.pk }}">{{ i }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-sm-1">
                                    <div class="btn-group" style="margin-top: 50px;">
                                        <button type="button" class="btn btn-white"
                                                onclick="move_right('groups', 'groups_selected')"><i
                                                class="fa fa-chevron-right"></i></button>
                                        <button type="button" class="btn btn-white"
                                                onclick="move_left('groups_selected', 'groups')"><i
                                                class="fa fa-chevron-left"></i></button>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div>
                                        <select id="groups_selected" name="projects" class="form-control m-b" size="12"
                                                multiple>
                                            {% for i in host.business.all %}
                                                <option value="{{ i.pk }}" selected>{{ i }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                            </div>

                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label for="services" class="col-lg-2 control-label">运行服务</label>

                                <div class="col-sm-3">
                                    <select id="services" size="12" class="form-control m-b" multiple>
                                        {% for i in services %}
                                            <option value="{{ i.pk }}">{{ i }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-sm-1">
                                    <div class="btn-group" style="margin-top: 50px;">
                                        <button type="button" class="btn btn-white"
                                                onclick="move_right('services', 'services_selected')"><i
                                                class="fa fa-chevron-right"></i></button>
                                        <button type="button" class="btn btn-white"
                                                onclick="move_left('services_selected', 'services')"><i
                                                class="fa fa-chevron-left"></i></button>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div>
                                        <select id="services_selected" name="service" class="form-control m-b" size="12"
                                                multiple>
                                            {% for i in host.service.all %}
                                                <option value="{{ i.pk }}" selected>{{ i }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                            </div>

                            <div class="hr-line-dashed"></div>
                            {{ form.room_number|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.cabinet|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.server_cabinet_id|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.guarantee_date|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.server_sn|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.services_code|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.idle|bootstrap_horizontal }}

                            <div class="hr-line-dashed"></div>
                            {{ form.editor|bootstrap_horizontal }}
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-5">
                                    <button class="btn btn-white" type="submit"> 重置</button>
                                    <button class="btn btn-primary" type="submit"> 提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
    <script>
        window.$ && $(function () {
            //验证初始化
            $('#host_edit').validator({
                //stopOnError:true,
                //timely: 2,
                theme: "yellow_right_effect",
                showOk: "",
                //自定义规则（PS：建议尽量在全局配置中定义规则，统一管理）
                rules: {
                    check_node: [/^((l|i)-){0,1}(n-[a-z0-9]+|[a-z0-9]{1,20}\.[a-z0-9]{1,20}\.({% for i in env %}{% if forloop.last %}{{ i }}{% else %}{{ i }}|{% endif %}{% endfor %}))\.({% for i in idc_list %}{% if forloop.last %}{{ i }}{% else %}{{ i }}|{% endif %}{% endfor %})$/, '主机名不正确'],
                    check_mac: [/^([0-9A-Fa-f]{2})(-[0-9A-Fa-f]{2}){5}|([0-9A-Fa-f]{2})(:[0-9A-Fa-f]{2}){5}$/, 'MAC不正确'], //验证mac
                    // check_ip: [/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/, 'ip不正确']
                    check_ip: [/^\s*(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\s*$/, 'ip不正确']
                },
                fields: {
                    // "node_name": {
                    //     rule: "required;check_node;remote[/assets/select, node_name, csrfmiddlewaretoken]",
                    //     tip: "输入主机名",
                    //     ok: "",
                    //     msg: {required: "必须填写!"},
                    //     data: {'data-ok':"主机名可以使用", 'data-msg-required': '正确'}
                    // },

                    "eth1": {
                        rule: "required;check_ip",
                        tip: "输入ip地址",
                        ok: "",
                        msg: {required: "必须填写!"}
                    },
                    "brand": {
                        rule: "required;",
                        tip: "",
                        ok: "",
                        msg: {required: "必选!"}
                    },
                    "system": {
                        rule: "required;",
                        tip: "",
                        ok: "",
                        msg: {required: "必选!"}
                    },
                    "idc": {
                        rule: "required;",
                        tip: "",
                        ok: "",
                        msg: {required: "必选!"}
                    }
                },
                valid: function (form) {
                    form.submit();
                }
            });
        });

        function move_left(from, to) {
            $("#" + from + " option").each(function () {
                if ($(this).prop("selected") == true) {
                    $("#" + to).append(this);
                    $(this).attr("selected", 'false');
                }
                $(this).attr("selected", 'true');
            });
        }

        function move_right(from, to) {
            $("#" + from + " option").each(function () {
                if ($(this).prop("selected") == true) {
                    $("#" + to).append(this);
                }

            });
        }

        function move_all(from, to) {
            $("#" + from).children().each(function () {
                $("#" + to).append(this);
            });
        }

    </script>
{% endblock content %}
